<template>
	<view>
		<view class="list" v-for="(item,index) in detail.ordergoods">
			<view class="goods-detail">
				<image :src="item.image" mode="aspectFill"></image>
				<view class="detail">
					<view class="cons">
						<view class="goodsname">{{item.title}}</view>
						<!-- <view class="sku">{{item.difference}}</view> -->
						<view class="num">X{{item.number}}</view>
					</view>
					<view class="money">￥{{item.actual_payment}}</view>
				</view>
			</view>
			<view class="pls">团购评价</view>
			<view class="usw">
				<view class="e-img">
					<image
						:src="item.score >= 1 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar1(1,index)"></image>
					<image
						:src="item.score >= 2 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar1(2,index)"></image>
					<image
						:src="item.score >= 3 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar1(3,index)"></image>
					<image
						:src="item.score >= 4 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar1(4,index)"></image>
					<image
						:src="item.score >= 5 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar1(5,index)"></image>
				</view>
			</view>
			<!-- <view class="usw">
				<view class="wd">包装</view>
				<view class="e-img">
					<image
						:src="item.service_score >= 1 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar2(1,index)"></image>
					<image
						:src="item.service_score >= 2 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar2(2,index)"></image>
					<image
						:src="item.service_score >= 3 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar2(3,index)"></image>
					<image
						:src="item.service_score >= 4 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar2(4,index)"></image>
					<image
						:src="item.service_score >= 5 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar2(5,index)"></image>
				</view>
			</view> -->
			<view class="texts">
				<textarea name="" placeholder="请输入" placeholder-class="" v-model="item.content"></textarea>
				<view>{{item.content.length}}/100</view>
			</view>
			<view class="imgs">
				<view @click="handleChooseImage(index)" class="add">+</view>
				<view class="add-img" v-for="(img,ci) in item.images" :key="ci">
					<view class="delete" @click="handleDeleteAblum(ci,index)">x</view>
					<image :src="img" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 		<view class="list">
			<view class="sh">
				<image :src="detail.shopinfo.avatar" mode="aspectFill"></image>
				<view>{{detail.shopinfo.shopname}}</view>
			</view>
			<view class="usw">
				<view class="wd">配送服务</view>
				<view class="e-img">
					<image
						:src="logistics >= 1 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar3(1)"></image>
					<image
						:src="logistics >= 2 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar3(2)"></image>
					<image
						:src="logistics >= 3 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar3(3)"></image>
					<image
						:src="logistics >= 4 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar3(4)"></image>
					<image
						:src="logistics >= 5 ?common.appUrl.oss+common.imgList.sc5:common.appUrl.oss+common.imgList.sc6"
						mode="widthFix" @click="handleSetStar3(5)"></image>
				</view>
			</view>
		</view> -->
		<view class="sub" @click="sub">发表评价</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		computed: {
			...mapState(['common'])
		},
		data() {
			return {
				app: getApp().globalData,
				url: getApp().globalData.baseurl,
				detail: {},
				logistics: 5,
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.app.post('/api/order/order_info', {
				id: e.id,
			}).then(res => {
				console.log(res)
				res.ordergoods = res.ordergoods.map(k => {
					k.content = '';
					return k
				})
				res.ordergoods = res.ordergoods.map(k => {
					k.score = 5;
					return k
				})
				res.ordergoods = res.ordergoods.map(k => {
					k.service_score = 5;
					return k
				})
				this.detail = res;
			})
		},
		methods: {
			sub() {
				let data = {
					id: this.id,
					logistics: this.logistics,
					goodsList: this.detail.ordergoods.map(k => {
						return {
							goods_id: k.goods_id,
							id: k.id,
							comment: k.content,
							describe: k.score,
							deliver: k.service_score,
							imgList: k.adminimg ? k.adminimg.join(',') : ''
						}
					})
				}
				console.log(data)
				this.app.post('/api/order/commentOrder', {
					...data
				}).then(res => {
					console.log(res.data)
					uni.showToast({
						title: '评价成功',
						icon: 'none',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1600)
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1600
					})
				})
			},
			handleSetStar1(star, index) {
				let item = this.detail.ordergoods[index]
				item.score = star
				this.$set(this.detail.ordergoods, index, item)
			},
			handleSetStar2(star, index) {
				let item = this.detail.ordergoods[index]
				item.service_score = star
				this.$set(this.detail.ordergoods, index, item)
			},
			handleSetStar3(star) {
				this.logistics = star
			},
			handleDeleteAblum(index, parentIndex) {
				let item = this.detail.ordergoods[parentIndex]
				item.images.splice(index, 1)
				this.$set(this.detail.ordergoods, parentIndex, item)
			},
			handleChooseImage(index) {
				const chooseImg = () => {
					return new Promise((success, fail) => {
						uni.chooseImage({
							count: 9,
							success: (res) => {
								success(res.tempFilePaths)
							},
							fail: () => {
								fail(NaN)
							}
						})
					})
				}
				const upload = (file) => {
					return new Promise((success, fail) => {
						uni.uploadFile({
							url: this.app.baseurl + '/api/common/upload',
							filePath: file,
							name: 'file',
							success: res => {
								if (res.statusCode === 200) {
									success(JSON.parse(res.data).data)
								} else {
									fail(NaN)
								}
							},
							fail: () => {
								fail(Nan)
							}
						})
					})
				}
				chooseImg().then(async (res) => {
					let uploadImg = []
					let uploadImg_admin = []
					let item = this.detail.ordergoods[index]
					item.images = item.images || []
					item.adminimg = item.adminimg || []
					res = res.splice(0, 9 - item.images.length)
					for (let i in res) {
						uni.showLoading({
							title: `正在上传 ${Number(i) + 1}/${res.length}`,
							mask: true
						})
						let linkImg = await upload(res[i])
						console.log(linkImg)
						uploadImg.push(linkImg.fullurl)
						uploadImg_admin.push(linkImg.url)
					}
					uni.hideLoading()
					item.images = item.images.concat(uploadImg.slice(0))
					item.adminimg = item.adminimg.concat(uploadImg_admin.slice(0))
					this.$set(this.detail.ordergoods, index, item)
				})


			}
		}
	}
</script>

<style lang="scss">
	.list {
		width: 690rpx;
		background-color: #FFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		padding: 30rpx 0;

		.sh {
			display: flex;
			align-items: center;
			margin-left: 30rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			view {
				font-size: 26rpx;
				color: #333333;
				margin-left: 10rpx;
			}
		}

		.goods-detail {
			width: 630rpx;
			display: flex;
			margin-left: 30rpx;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			.detail {
				width: 490rpx;
				margin-left: 20rpx;
				display: flex;
				justify-content: space-between;

				.goodsname {
					font-size: 26rpx;
					color: #333333;
				}

				.sku {
					font-size: 26rpx;
					color: #999999;
				}

				.num {
					font-size: 26rpx;
					color: #999999;
				}

				.money {
					font-size: 36rpx;
					color: #333333;

					text {
						font-size: 26rpx;
					}
				}
			}
		}

		.pls {
			width: 630rpx;
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #333333;
			margin-top: 30rpx;
		}

		.texts {
			width: 630rpx;
			border-radius: 20rpx;
			background: #F6F6F6;
			margin-top: 40rpx;
			padding: 30rpx 0;
			margin-left: 30rpx;

			textarea {
				width: 570rpx;
				height: 200rpx;
				margin-left: 30rpx;
			}

			view {
				width: 570rpx;
				margin-left: 30rpx;
				text-align: right;
				color: #666666;
			}
		}

		.imgs {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			flex-wrap: wrap;

			.add {
				font-size: 80rpx;
				width: 130rpx;
				height: 130rpx;
				background-color: #F6F6F6;
				border-radius: 20rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.add-img {
				width: 130rpx;
				height: 130rpx;
				background-color: #f7f7f7;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				position: relative;
				overflow: hidden;

				.delete {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					z-index: 999;
					font-size: 45rpx;
					// &::after{
					// 	content: "X";
					// 	color: white;
					// 	font-size: 16rpx;
					// }
				}

				&:nth-child(3n-1) {
					margin-left: 20rpx;
					margin-right: 20rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}

				.icon {
					font-size: 60rpx;
					color: #6f6f6f;
				}
			}
		}

		.usw {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			margin-top: 26rpx;

			.wd {
				font-size: 26rpx;
				color: #333333;
				margin-right: 20rpx;
			}

			.e-img {

				display: flex;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.sub {
		width: 690rpx;
		height: 80rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #84BD00;
		color: #fff;
		font-size: 30rpx;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
	}
</style>